<template>
	<view class="searchBox" :class="className">
		<i class="iconfont icon-sousuo"></i>
		<input class="scInput" :placeholder="placeholder || '关键字搜索'" v-model="keyword" @confirm="goSearch" @input='setval'/>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	export default defineComponent({
		components:{
			
		},
		props:{
			modelValue: '',
			placeholder:'',
			className:''
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				keyword:''
			})
			
			onMounted(()=>{
				state.keyword = props.modelValue
			})
			
			const goSearch = ()=>{
				//proxy.$emit('update:modelValue',state.keyword)
				proxy.$emit('confirm',state.keyword)
			}
			
			const setval =(e)=>{
				proxy.$emit('update:modelValue',e.detail.value)
			}
			
			return {
				...toRefs(state),
				setval,
				goSearch
			}
		}
	})
</script>

<style lang="scss" scoped>
	.searchBox{
		display: flex;
		align-items: center;
		height: 84rpx;
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		&.ydTopSearch{
			height: 80rpx;
			border-radius: 40rpx;
			background: #eeeeee;
		}
		.iconfont{
			font-size: 40rpx;
			color: #999;
			margin: 0 15rpx;
		}
		.scInput{
			flex: 1;
			height: 100%;
			border: 0;
			padding: 0 15rpx 0 0;
			font-size: 28rpx;
		}
	}
</style>
